<template>
  <view v-if="listData.length > 0" class="grid-body mt-30">
    <view class="check grid-common" v-for="(item, i) in listData" :key="i">
      <view class="title flex">
        <image class="icon-style" src="/static/images/book-icon.png" mode="aspectFill"></image>
        {{ item.managerCode }}
        <view class="level-status" :class="{ danger: item.managerLevelLabel === '重大隐患' }">{{
          item.managerLevelLabel
        }}</view>
      </view>
      <view class="flex text"
        >上报时间：
        <text>{{ item.createTime }}</text>
      </view>
      <view class="flex-text"
        >上报人：
        <text>{{ item.reportPersonName }}</text>
      </view>
      <view class="flex-text"
        >当前待办人：
        <text>{{ item.currentToDoPersonNames }}</text>
      </view>
      <view class="flex-text"
        >隐患描述：
        <text class="text-desc">
          {{ item.managerDesc }}
        </text>
      </view>
      <view class="footer-wrap">
        <view class="content-wrap">隐患来源：{{ item.managerSourceLabel }}</view>
        <view class="button-wrap">
          <view class="button" @click="goBookRead(item)">查看</view>
        </view>
      </view>
      <view class="check-right-top">
        <image
          v-if="item.managerStatus === '2' && item.acceptanceIdea === '4'"
          src="/static/images/message/fail-pass.png"
          class="icon-style"
          mode="aspectFill"
        />
        <image
          v-else
          class="icon-style"
          :title="statusImages[item.managerStatus]"
          :src="statusImages[item.managerStatus]"
          mode="aspectFill"
        />
      </view>
    </view>
  </view>
  <view v-else><empty></empty></view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
export default {
  name: 'BookList',
  components: {
    Empty
  },
  data() {
    return {
      statusImages: {
        2: '/static/images/message/icon1-right.png', // 待审核
        4: '/static/images/message/icon2-right.png', // 待整改
        5: '/static/images/message/icon3-right.png', // 待验收
        6: '/static/images/message/icon8-right.png', // 已验收
        1: '/static/images/message/icon4-right.png', // 待分派
        3: '/static/images/message/icon5-right.png', // 待审批
        11: '/static/images/message/icon6-right.png', // 延期待审核
        12: '/static/images/message/icon7-right.png', // 延期待审批
        99: '/static/images/message/icon9-right.png' // 已取消
      }
    }
  },
  props: {
    listData: {
      type: Array,
      default: []
    }
  },
  methods: {
    goBookRead({ managerId }) {
      uni.navigateTo({
        url: `/pages/work/hiddenDangerBook/detail?managerId=${managerId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-wrap {
  display: flex;
  background-color: #fff;

  view {
    position: relative;
    width: 35%;
    height: 38rpx;
    line-height: 38rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #999;
    text-align: right;
    margin-bottom: 32rpx;
  }

  .active {
    color: #333;

    &::after {
      content: '';
      position: absolute;
      right: 24rpx;
      bottom: -12rpx;
      height: 6rpx;
      width: 30rpx;
      background-color: #454a5e;
    }
  }
}
.grid-body {
  background-color: transparent;
}

.grid-common {
  position: relative;
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
}
.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    align-items: center;

    .level-status {
      margin-left: 20rpx;
      padding: 4rpx 10rpx;
      background: orange;
      color: #fff;
      &.danger {
        background: red;
      }
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      width: 76%;
      color: #333;
      display: inline-block;

      &.text-grey {
        color: #999;
      }
      &.w-50 {
        width: 50%;
      }
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;
    white-space: nowrap;

    text {
      color: #333;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .bor-top {
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}

.check-right-top {
  position: absolute;
  right: 20rpx;
  top: 20rpx;

  image {
    width: 100rpx !important;
    height: 88rpx !important;
  }
}
</style>
